CSS Grid lay-out
Home

CSS Grid lay-out

CSS Grid lay-out

Enkele eenvoudige voorbeelden moeten een overzicht geven van de basisconcepten van de CSS-rasterlay-outmodule. Grid is een zeer flexibele module en je kan die dus op verschillende manieren gebruiken.

Inleiding

Lay-outs zijn gemakkelijk te maken met behulp van rasters (grids). Tot nu toe beschikte het web niet over een grid. Er werden daarom allerlei methoden en hacks uitgeprobeerd om een webpagina in een rooster weer te geven. Het begon met op tabellen gebaseerde lay-outs, gevolgd door op float gebaseerde lay-outs. Maar dit zijn enkel nepoplossingen omdat tabellen en float niet bedoeld waren om lay-outs te maken.

CSS Grid beschikt over een reeks eigenschappen die ons toelaten:

  1. gridstructuren te maken;
  2. de grootte en de plaats van grid-items te bepalen;

We kunnen media-queries gebruiken om onze rasters aan te passen aan verschillende contexten.

Grid wordt ook geleverd met een krachtig algoritme voor zelfplaatsing, waardoor het gemakkelijker wordt om een ruimte te vullen zonder al te veel gecompliceerde berekeningen te moeten maken.

Inhoud

  1. CSS Grid terminologie
  2. Een CSS grid definieren
  3. CSS Grid Bronnen

JI
2019-05-16 11:11:44